<template>
<div class="contain">
    <div class="area">
        <div class="area_bg " :style="{backgroundImage:`url(${area_bg})`}">
            <div class="area_bg_wrap">
                <div class="area_con">
                    <img src="@static/introduce/experience.png" alt="">
                </div>
            </div>
        </div>
        <div class="functio ">
            <div class="title"><img src="@static/introduce/fun.png"></div>
            <div class="content">
                <div class="target commen">
                    <span>全方位覆盖目标用户
                    </span>
                    <img src="@static/introduce/target.png">
                </div>
                <div class="fun commen">
                    <span>企业品牌的全新形象
                    </span>
                    <img src="@static/introduce/figure.png">
                </div>
                <div class="alive commen">
                    <span>客户沟通一键直达
                    </span>
                    <img src="@static/introduce/talk.png">
                </div>
                <div class="link commen">
                    <span>企业营销全新链路
                    </span>
                    <img src="@static/introduce/link.png">
                </div>
            </div>
        </div>
        <div class="sys d-none d-lg-block">
            <div class="tit">
                <img src="@static/introduce/sys.png">
            </div>
            <div class="wrap">
                <div class="mess">
                    <div class="card">
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                    </div>
                </div>
                <div class="applets">
                    <div class="card">
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                    </div>
                </div>
                <div class="system ">
                    <div class="card">
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                    </div>
                </div>
                <div class="customer">
                    <div class="card">
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        <div class="intelligence">
                           <div> AI智能名片系统</div>
                        </div>
                    </div>
                </div>
                <div class="opacity">
                    <div class="card">
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="system_block d-col-block d-md-none">
            <div class="mess">
                    <div class="card">
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        
                    </div>
                    <div class="card">
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        
                    </div>
                    <div class="card">
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        
                    </div>
                    <div class="card">
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                        
                    </div>
                    <div class="card">
                        <div class="intelligence">
                            <div>AI智能名片系统</div>
                        </div>
                        <div class="content">
                            全渠道多场景覆盖全网用户，为个人店铺、中小微企业提供全面且精准的客户覆
                            盖，企业品牌形象的重构和展示，建立企业客户主动与企业联系的窗口，为企业的营
                            销推广宣传等建立全新的链路闭环。
                        </div>
                    </div>
                </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data(){
        return{
            area_bg:require('@static/introduce/area__bg.png'),
        }
    },
    methods:{
        introduceSys(type) {
            console.log('ffffffff',type)
            this.listShow = type
            }
        }
}
</script>

<style scoped lang="stylus">
@media (min-width: 300px) {
    .contain{
        width:100% !important
        // padding-left:30px !important
        .area{
            .area_bg{
                width:90% !important

                margin:0px 5% !important
                height:200px !important
                // .area_con{
                //     width:50%
                //     height:100
                // }
            }
            .functio{
                width:90% !important

                margin:0px 5% !important
                padding-top:20px !important
                height:200px !important
                // margin:0 auto !important
                .content{

                    .commen{
                        font-size:10px !important
                        height:100px !important
                        text-align:center !important
                        img{
                            height:50px
                            width:50px
                        }
                    }
                }
            }
            .system_block{
                width:90% !important
                margin:0px 5% !important
                .mess{
                    .card{
                        // height:100px
                        font-size:12px
                        line-height:18px
                        .content{

                        }
                        .intelligence{
                            font-size:15px
                            font-weight:700
                            margin-bottom:20px
                            margin-top:20px
                        }
                    }

                }

            }
        }
    }
}
/*sm*/

/*lg*/
@media (min-width: 992px) {
    .contain{
        width:100% !important
        // padding-left:30px !important
        .area{
            width:100% !important
            .area_bg{
                width:100% !important
                margin:0px !important
                height:400px !important
                // .area_con{
                //     width:50%
                //     height:100
                // }
            }
            .functio{
                width:60% !important
                padding-top:40px !important
                height:250px !important
                margin:0 auto !important
                .content{

                    .commen{
                        font-size:15px !important
                        height:120px !important
                        text-align:center !important
                        display:flex
                        flex-direction:column
                        justify-content:space-between
                        img{
                            height:80px
                            width:80px
                        }
                    }
                    
                }
            }
            .system_block{

                .mess{
                    
                    .card{
                        // height:100px
                        font-size:12px
                        line-height:18px
                        
                        .content{

                        }
                        .intelligence{
                            font-size:15px
                            font-weight:700
                            margin-bottom:20px
                            margin-top:20px
                        }
                    }

                }

            }
        }
    }
}
/*xl*/
@media (min-width: 1200px) {
  .container {
    width: 100%;
    
  }
}

.area
    width:100%
    font-size:17px
    color:#313131
    .area_bg
        // width:1920px
        // width:100%
        height:483px
        background:center
        position:relative

        background-size cover
        img
            width:100%
            height:100%
        .area_bg_wrap
            // width:1200px
            // width:363px
            height:169px
            margin:0 auto
            position:absolute
            left:50%
            top:50%
            transform:translate(-50%,-50%)
            .area_con
                // width:363px
                height:169px
                
                img
                    width:100%
                    height:100%
    .functio
        width: 100%
        height:400px
        margin: 0 auto
        padding-top:100px
        display:flex
        flex-direction:column
        justify-content:space-between
        .title
            width:118px
            height:28px
            margin: 0px auto
            img
                width:100%
        .content
            width:100%
            display:flex
            justify-content:space-around
            
            .commen
                height:200px
                display:flex
                flex-direction:column
                justify-content:space-around
                align-items:center
                span
                    line-height:15px
            .target
                img
                    width:100%
                    height: 100%
                
            .fun,.alive,.link
                img
                    width:100%
                    height: 100%
            
    .sys
        width: 1000px
        margin: 0 auto
        display:flex
        flex-direction:column
        justify-content:space-between
        // text-align:center
        .tit
            width:118px
            height:28px
            margin: 100px auto
            img
                width:100%
        .wrap
            width:100%
            height:2000px
            display:flex
            flex-direction:column
            justify-content:space-around
            .mess,.system,.opacity
                width:100%
                height: 300px
                display:flex
                flex-direction:column
                justify-content:space-around
                .card
                    position:relative
                    height: 300px
                    width:100%
                    .content
                        line-height:25px
                        letter-spacing:2px
                        position:absolute
                        left:0
                        top:0
                        width:860px
                        height 290px
                        padding:100px 129px 115px 72px
                        box-sizing:border-box
                        box-shadow: 0 0 20px 5px #cdd2f6
                    .intelligence     
                        position:absolute
                        right:10px
                        top:-35px
                        text-align:center
                        width:216px
                        height 216px
                        line-height 216px
                        background:rgba(147,160,250,.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/ 
                        filter:Alpha(opacity=20);/*实现IE背景透明*/
                        div
                            opacity:1
            .applets,.customer
                width:100%
                height: 300px
                display:flex
                flex-direction:column
                .card
                    position:relative
                    .content
                        line-height:25px
                        letter-spacing:2px
                        position:absolute
                        left:111px

                        top:0
                        width:860px
                        height 290px
                        padding:100px 72px 115px 129px
                        box-sizing:border-box
                        box-shadow: 0 0 20px 5px #cdd2f6
                    .intelligence     
                        position:absolute
                        left:0
                        top:-35px
                        text-align:center
                        width:216px
                        height 216px
                        line-height 216px
                        background:rgba(147,160,250,.5) none repeat scroll !important; /*实现FF背景透明，文字不透明*/ 
                        filter:Alpha(opacity=20);/*实现IE背景透明*/
                        div 
                            opacity:1 !important
                                 
</style>>

